<template>
  <div class="container">
    <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 15px" @click="goAdd()">
      {{ $t('添加') }}
    </el-button>
    <BaseTable ref="baseTable" :request="request" row-key="id" :indent="20" @success="tableSuccess">
      <el-table-column label="ID" prop="id" width="160px" />
      <el-table-column :label="$t('网站名称')" prop="title" show-overflow-tooltip />
      <el-table-column :label="$t('网站域名')" prop="domain" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link :href="'http://' + scope.row.domain" target="_blank">
            {{ scope.row.domain }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('网站状态')" prop="status" width="180px">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :active-text="$t('正常')"
            :inactive-text="$t('禁用')" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.2)"
            @change="disableUser(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" fixed="right" width="150px" align="right">
        <template slot-scope="scope">
          <EditBtn @click="editor(scope.row)" />
          <DelBtn @success="del(scope.row)" :confirm-content="$t('是否删除站点')" />
          <BaseDropdown @command="handleCommand($event, scope.row)">
            <template>
              <el-dropdown-item command="map">
                {{ $t('生成sitemap') }}
              </el-dropdown-item>
              <el-dropdown-item command="child">
                {{ $t('添加子站点') }}
              </el-dropdown-item>
            </template>
          </BaseDropdown>
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog :title="addForm.id ? $t('编辑') : $t('添加')" :dialog-show.sync="dialogShow" width="50%" @submit="submit"
      footer>
      <el-form ref="addForm" :model="addForm" :rules="rules" class="addForm" label-position="top">
        <el-form-item :label="$t('上级站点')" prop="parent_id">
          <el-select v-model="addForm.parent_id" :disabled="addForm.id ? true : false" @change="changeParent">
            <el-option :label="$t('作为上一级')" :value="0" />
            <el-option v-for="item in tableData" :key="item.id" :label="item.domain + '--' + item.title"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('网站名称')" prop="title">
          <el-input v-model="addForm.title" />
        </el-form-item>
        <el-form-item :label="$t('网站域名')" prop="domain">
          <el-input v-model="addForm.domain" />
        </el-form-item>
        <el-form-item :label="$t('状态')">
          <el-select v-model="addForm.status">
            <el-option :label="$t('正常')" :value="1" />
            <el-option :label="$t('禁用')" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script>
import websiteApi from '@/api/website.js'
export default {
  data() {
    return {
      request: websiteApi.websiteList,
      loading: false,
      tableData: [], //
      dialogShow: false,
      addForm: {
        id: '',
        title: '',
        domain: '',
        status: '',
        parent_id: '0'
      },
      rules: {
        title: [
          {
            required: 'true',
            message: this.$t('请输入网站名称'),
            trigger: 'blur'
          }
        ],
        domain: [
          {
            required: 'true',
            message: this.$t('请输入网站域名'),
            trigger: 'blur'
          }
        ]
      },
      id: ''
    }
  },
  created() { },
  methods: {
    handleCommand(command, row) {
      switch (command) {
        case 'child':
          this.goAdd(row)
          break
        case 'map':
          this.siteMap(row)
          break
      }
    },
    tableSuccess(res) {
      this.tableData = res.data
    },
    // 生成sitemap
    siteMap(row) {
      this.loading = true
      websiteApi.sitemap({ website_id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          window.open(res.data)
        }
        this.loading = false
      })
    },
    // 修改状态
    disableUser(row) {
      const val = {
        id: row.id,
        title: row.title,
        domain: row.domain,
        status: row.status
      }
      websiteApi.setStatus(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.$refs.baseTable.getList()
        }
      })
    },
    // 新增
    goAdd(val) {
      this.id = ''
      this.addForm = {}
      this.addForm.parent_id = val ? val.id : 0
      this.addForm.status = 1
      this.dialogShow = true
    },
    // 切换站点
    changeParent(val) {
      this.$forceUpdate()
    },
    // 编辑
    editor(row) {
      // this.id = row.id
      this.addForm = {
        title: row.title,
        domain: row.domain,
        status: row.status,
        id: row.id,
        parent_id: row.parent_id
      }
      this.dialogShow = true
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            websiteApi.websiteSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getWebList()
                this.$refs.baseTable.getList()
              }
            })
          } else {
            websiteApi.websiteUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getWebList()
                this.$refs.baseTable.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    getWebList() {
      websiteApi.websiteList().then(res => {
        // 新增后的站点列表更新到vuex中
        this.$store.commit('tagsView/WEBLIST', res.data)
      })
    },
    // 查看模型字段列表
    check(row) {
      this.$router.push({ name: 'modelField', query: { id: row.id } })
    },
    // 删除
    del(row) {
      websiteApi.websiteDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.$refs.baseTable.getList()
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  margin: 16px;
  background-color: #fff;
}

.el-table {
  margin-bottom: 20px;
}

.el-form-item {
  width: 100%;

  .el-select {
    width: 100%;
  }
}
</style>
